<template>
  <a-card>
    <a-row class="aRow">
      <div>
        <a-input placeholder="请输入部门名称" v-model="keyWord['name']" />
      </div>
      <div style="margin-left: 10px">
        <a-input
          placeholder="请输入部门负责人"
          v-model="keyWord['principal']"
        />
      </div>
      <a-button type="primary" @click="onSearch()" style="margin-left: 10px">
        搜索
      </a-button>
    </a-row>

    <a-space class="operator">
      <a-button type="primary" v-on:click="add()">新建部门</a-button>

      <a-button v-on:click="openAll()">全部展开</a-button>
      <a-button v-on:click="closeAll()">全部关闭</a-button>
    </a-space>

    <a-table
      style="margin-top: 30px"
      :columns="columns"
      :data-source="data"
      :loading="loading"
      :rowKey="(record) => record.id"
      :defaultExpandAllRows="defaultExpandAllRows"
      :pagination="false"
      :key="keyChange"
    >
      <template slot="operation" slot-scope="text">
        <div class="operation">
          <a href="javascript:;" v-on:click="addSon(text)">添加子部门</a>
          <a-popconfirm
            :title="`确定要${text.status ? '禁用' : '启用'}吗?`"
            @confirm="() => operate('status', text)"
          >
            <a href="javascript:;" v-show="text.status">禁用</a>
            <a href="javascript:;" v-show="!text.status">启用</a>
          </a-popconfirm>
          <a href="javascript:;" v-on:click="operate('edit', text)">编辑</a>

          <a-popconfirm
            :title="`确定要删除吗?`"
            @confirm="() => operateDel(text)"
          >
            <a href="javascript:;">删除</a>
          </a-popconfirm>
        </div>
      </template>
    </a-table>

    <div class="show-right">
      <!-- <a-pagination
        :current="page"
        :pageSize="pageSize"
        :total="total"
        :showSizeChanger="true"
        :showLessItems="true"
        :showQuickJumper="true"
        :pageSizeOptions="['10', '20', '50', '100', '500', ...total.toString()]"
        :scroll="{ x: 1300 }"
        @change="onPageChange"
        @showSizeChange="onSizeChange"
        :loading="loading"
      >
        <template slot="buildOptionText" slot-scope="props">
          <span v-if="props.value == total">全部</span>
          <span v-else>{{ props.value }}条/页</span>
        </template>
      </a-pagination> -->
    </div>

    <!-- </div> -->
    <!-- <router-view> </router-view> -->
  </a-card>
</template>

<script>
// import StandardTable from "@/components/table/StandardTable";

const columns = [
  {
    title: "部门名称",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "部门负责人",
    dataIndex: "principal",
    key: "principal",
    width: "20%",
  },
  {
    title: "权限名称",
    returnField: "like-crm_role-name",
    dataIndex: "role_name",
    // width: 400,
    searchAble: true,
  },
  {
    title: "创建时间",
    dataIndex: "create_time",
    key: "create_time",
    width: "20%",
  },
  {
    title: "排序",
    dataIndex: "sort",
    key: "sort",
    width: "12%",
  },
  {
    title: "操作",
    // dataIndex: 'operation',
    scopedSlots: { customRender: "operation" },
    width: "220px",
  },
];
import { divisionList, divisionEdit } from "@/services/division";

export default {
  name: "TeachingCulture",
  data() {
    return {
      data: [],
      columns,
      //   rowSelection,
      //   expandedRowKeys: [],
      keyWord: {
        // "equal-crm_division-pid": 0,
      },
      loading: false, //表格是否加载中
      defaultExpandAllRows: true,
      all: [],
      keyChange: true,
      page: 1, //第几页
      pageSize: 10, //一页多少条
      total: 0, //总共多少条
    };
  },
  authorize: {
    operate: "编辑",
    batchStatus: "编辑",
    add: "添加",
    addSon: "添加",
    operateDel: "删除",
    batchDel: "删除",
  },
  created() {
    // this.getColumns()
    this.tableLoad(); //表格查询
  },
  methods: {
    onSearch() {
      //   this.tableLoad();
      //  const name = this.keyWord.name.trim()
      //  const principal = this.keyWord.principal.trim()
      //   if(principal || name){

      //   }

      this.loading = true;
      let keyWord = this.keyWord;
      let whereStr = "";
      const data = JSON.parse(JSON.stringify(this.all));
      for (let key in keyWord) {
        if (keyWord[key].trim()) {
          whereStr += `${key}.indexOf("${keyWord[key]}") != -1 &&`;
        }
      }

      const mapData = (array, whereStr) => {
        let all = [];
        for (let i = 0; i < array.length; i++) {
          let name = array[i].name; //eval函数有用
          let principal = array[i].principal; //eval函数有用
          let tmp = array[i];
          if (eval(whereStr)) {
            //找到就不往下找
            all.push(array[i]);
          } else if (
            array[i].hasOwnProperty("children") &&
            array[i].children.length > 0
          ) {
            let children = mapData(array[i].children, whereStr);
            if (children.length > 0) {
              tmp.children = children;
              all.push(tmp);
            }
          }
        }
        return all;
      };

      if (whereStr) {
        whereStr = whereStr.substring(0, whereStr.length - 2);
        let all = mapData(data, whereStr);
        this.data = all;
        this.keyChange = !this.keyChange;
        this.loading = false;
      } else {
        this.tableLoad();
      }
    },
    onSizeChange(current, size) {
      this.page = 1;
      this.pageSize = size;
      this.tableLoad();
    },
    onPageChange(page, pageSize) {
      this.page = page;
      this.pageSize = pageSize;
      this.tableLoad();
    },
    add() {
      this.$router.push("/crmManagement/divisionAdd");
    },
    async tableLoad() {
      this.loading = true;
      //   this.keyWord['equal-crm_division-pid'] = 0
      let sourceData = await divisionList({
        // page: this.page,
        // limit: this.limit,
        // keyWord: this.keyWord,
      });
      const {
        list,
        //   total
      } = sourceData.data;
      this.all = list;
      this.data = list;
      //   this.total = total;
      this.keyChange = !this.keyChange;

      this.loading = false;
    },
    async operate(key, data, top = false) {
      const { sysTime, $message, tableLoad } = this;
      switch (
        key //置顶操作
      ) {
        // case "onTop":
        //   $message.loading({ content: "修改中", key: "loading" });
        //   let res = await adminEdit({
        //     formData: { top_time: data.top_time && !top ? null : sysTime() },
        //     id: data.id,
        //   });
        //   if (res.code == 200) {
        //     $message.success({
        //       content: "修改成功",
        //       key: "loading",
        //       duration: 2,
        //     });
        //     tableLoad();
        //   }

        //   break;
        case "status":
          $message.loading({ content: "修改中", key: "loading" });
          let adminRes = await divisionEdit({
            formData: { status: data.status ? 0 : 1 },
            conditions: { id: data.id },
          });
          if (adminRes.code == 200) {
            $message.success({
              content: "修改成功",
              key: "loading",
              duration: 2,
            });
            tableLoad();
          }
          break;
        case "edit":
          this.$router.push({
            path: "/crmManagement/divisionEdit",
            query: { division_id: data.id },
          });

          break;
      }
    },
    async operateDel(data) {
      const { sysTime, $message, tableLoad } = this;
      $message.loading({ content: "删除中", key: "loading" });
      let res = await divisionEdit({
        formData: { delete_time: sysTime() },
        conditions: { id: data.id },
      });
      if (res.code == 200) {
        $message.success({
          content: "删除成功",
          key: "loading",
          duration: 2,
        });
        tableLoad();
      }
    },
    addSon(text) {
      let pid = text.id;
      this.$router.push({
        path: "/crmManagement/divisionAdd",
        query: { pid: pid, name: text.name },
      });
    },
    openAll() {
      this.defaultExpandAllRows = true;
      this.keyChange = !this.keyChange;
    },
    closeAll() {
      this.defaultExpandAllRows = false;
      this.keyChange = !this.keyChange;
    },
    batchStatus(status) {
      const { $message, tableLoad, $confirm, selectedRowKeys } = this;
      let text = status ? "启用" : "禁用";
      $confirm({
        title: "确定要" + text + "吗?",
        async onOk() {
          $message.loading({ content: text + "中", key: "loading" });
          let res = await adminEdit({
            formData: { status: status },
            id: selectedRowKeys,
          });
          if (res.code == 200) {
            $message.success({
              content: text + "成功",
              key: "loading",
              duration: 2,
            });
            tableLoad();
          }
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.table-adv {
  max-width: 100%;
  // border: 1px solid blue;
  overflow: auto;
  white-space: nowrap;
}

.show-right {
  float: right;
  margin-top: 10px;
}
.operation {
  display: flex;
  justify-content: space-between;
}
.over-one {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.aRow {
  display: flex;
  align-items: center;
  height: 50px;
  // border: 1px solid red;

  // justify-content: center;
}
.operator {
  margin-top: 20px;
}
</style>
